<template>
    <div>
        <el-row justify="center" align="middle" type="flex" style="padding-bottom: 60px" class="contains">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
                <div v-show="step === 0">
                    <!--<mt-swipe :auto="0" style="height: 200px">-->
                        <!--<mt-swipe-item>1</mt-swipe-item>-->
                        <!--<mt-swipe-item>2</mt-swipe-item>-->
                        <!--<mt-swipe-item>3</mt-swipe-item>-->
                    <!--</mt-swipe>-->
                    <div class="img_wrap">
                        <img :src="adData.adImg" alt="">
                    </div>
                    <div class="dom-sales">
                        <h2>{{$t('t.timmingSale')}}</h2>
                        <div class="sales_wrap">
                            <div class="sales">
                                <div class="price">
                                    <ins>{{adData.currency}}{{adData.price}}</ins>
                                    <del v-if="adData.orig&&adData.orig>adData.price" style="display: block">{{adData.currency}}{{adData.orig}}
                                    </del>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="module_title">
                        <div style="font-weight: bold;font-size: 12px;border-bottom: 1px dashed #ddd;padding: 10px;">
                            <span style="color: red;">{{$t('t.serviceTip')}}</span>
                            <span>{{$t('t.serviceTip1')}}</span>
                        </div>
                    </div>
                    <div class="service-tips">
                        <div class="service">
                            <span></span>
                        </div>
                    </div>
                    <div class="product_info">
                        <h2>{{$t('t.productInfo')}}</h2>
                        <div v-html="adData.productDetails"></div>
                    </div>
                    <div class="icon-caret-top mintui mintui-back" @click="handleScrollTop"></div>
                </div>
                <div v-show="step === 1">
                    <mt-header style="background-color:#2e2e2e">
                            <span  slot="left" class="mintui mintui-back"  @click="step = 0">Back</span>
                    </mt-header>

                    <div class="headerTipContent">
                        <div>
                            {{$t('t.infoInputTipContent1')}}
                        </div>
                        <div>
                            {{$t('t.infoInputTipContent2')}}
                        </div>
                    </div>
                    <section class="form-layer-inline" style="background-color: white">
                        <div class="bdbox" v-for="item,key in userInfo" v-if="!noConfirm.includes(key)">
                            <div class="textbox">
                                <div v-if="commonInfo.includes(key)">
                                    <el-input :prop="key" v-model="userInfo[key]"
                                              :type="commonInfoTextArea.includes(key)?'textarea':'text'"
                                              :placeholder="$t('t.'+key+'Tip')">
                                    </el-input>
                                </div>
                                <div v-if="key === 'phoneNumber'">
                                    <div class="el-input el-input--small">
                                        <input prop="phoneNumber" type="number" v-model="showPhone"
                                               :placeholder="$t('t.phoneNumberTip')" @input="phoneChange();"
                                               class="el-input__inner">
                                    </div>
                                </div>
                                <div v-if="addressOption[key]">
                                    <el-select :placeholder="$t('t.'+key+'OptionTip')"
                                               :no-data-text="$t('t.'+key+'OptionNoDataTip')"
                                               @change="addressData(key)" :prop="key" v-model="userInfo[key]">
                                        <el-option
                                                v-for="item in addressOption[key]"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div v-if="key === 'prices'">
                                    {{extras}}
                                </div>
                                <div v-if="key === 'productNumber'" class="m-selnum">
                                    <div class="textWrap">
                                        <input type="number" v-model="productNumber" @input="inputnumber();"
                                               :disabled="adData.packages && adData.packages.length">
                                    </div>
                                    <div style="float: right" v-if="adData.packages && !adData.packages.length">
                                        <div @click="minnumber()" class="less z-dis">-</div>
                                        <div @click="addnumber()" class="more">+</div>
                                    </div>
                                </div>
                            </div>
                            <label style="flex-basis:10px;text-align: right;"><em
                                    v-if="!commonInfoNoRequired.includes(key)">*</em></label>
                        </div>
                        <div style="padding: 5px 18px 5px 8px">
                            <div class="labelInfo" >
                                {{$t('t.productInfo')}}
                            </div>
                            <div class="orderInfo">
                                <div class="orderInfoDetail">

                                    <div class="item-info">
                                        <span v-if="adData.packages && !adData.packages.length">{{adData.adName}}</span>
                                        <span v-else>{{productSelectAttr.package}}</span>
                                        <span class="item-attr" v-for="item,key in orderDetail(JSON.stringify(this.productSelectAttr))">
                                            <span v-for="attr in item" style="padding-right:5px">{{attr}}</span>
                                        </span>
                                    </div>
                                    <div style="text-align: right">
                                        <div style="font-size: 14px;line-height: 21px">
                                            <span>
                                               {{adData.price}}
                                            </span>
                                        </div>
                                        <span class="productNumber">
                                            x{{productNumber}}
                                        </span>
                                    </div>
                                </div>
                                <div style="border-top:1px dashed #aaa;font-family: serif;padding-top: 5px;text-align: start;overflow: auto;">
                                    <div class="searchPrice">
                                        <span class="priceTitle">{{$t('search.total')}}</span>
                                        <span>{{extras}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 5px 18px 5px 8px">
                            <div class="labelInfo">{{$t('t.contactTime')}}</div>
                            <div class="contactTime">
                                <el-time-select
                                        v-model="startTime"
                                        :picker-options="{
                                              start: '09:00',
                                              step: '00:30',
                                              end: '18:30'
                                            }">
                                </el-time-select>
                                <el-time-select
                                        v-model="endTime"
                                        :picker-options="{
                                              start: '09:00',
                                              step: '00:30',
                                              end: '20:00',
                                              minTime: startTime
                                            }">
                                </el-time-select>
                            </div>
                        </div>
                        <div class="bdbox">
                            <div class="textbox">
                                <label class="payment_type">
                                    <span class="huo">{{$t('t.COD')}}</span>
                                </label>
                            </div>
                        </div>
                    </section>
                </div>
            </el-col>
        </el-row>
        <el-row justify="center" align="middle" type="flex" style="position: fixed;bottom: -2px;width: 100%">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
                <footer>
                    <span v-if="step === 0">
                        <span class="buy_now" @click="showAttr">
                            <span>{{$t('t.buyNow')}}</span>
                        </span>
                    </span>
                    <span v-else>

                        <span class="buy_now" @click="confirmBuy">
                            <span>{{$t('t.buyConfirm')}}</span>
                        </span>
                    </span>
                </footer>
            </el-col>
        </el-row>

        <el-row justify="center" align="middle" type="flex" style="position: fixed;bottom: -2px;width: 100%">
            <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
                <mt-popup id="popup"
                          v-model="popupVisible"
                          position="bottom">

                    <div style="padding: 5px 10px">
                        <div class="labelInfo" >
                            {{$t('t.productInfo')}}
                        </div>
                        <div class="orderInfo">
                            <div class="orderInfoDetail">

                                <div class="item-info">
                                    <span v-if="adData.packages && !adData.packages.length">{{adData.adName}}</span>
                                    <span v-else>{{productSelectAttr.package}}</span>
                                    <span class="item-attr" v-for="item,key in orderDetail(productSelectAttr)">
                                            <span v-for="attr in item" style="padding-right:5px">{{attr}}</span>
                                        </span>
                                </div>
                                <div style="text-align: right">
                                    <div style="font-size: 14px;line-height: 21px">
                                            <span>
                                               {{adData.price}}
                                            </span>
                                    </div>
                                    <span class="productNumber">
                                            x{{productNumber}}
                                        </span>
                                </div>
                            </div>
                            <div style="border-top:1px dashed #aaa;font-family: serif;padding-top: 5px;text-align: start;overflow: auto;">
                                <div class="searchPrice">
                                    <span class="priceTitle">{{$t('search.total')}}</span>
                                    <span>{{extras}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bdbox" style="padding: 5px 10px" v-if="adData.packages && !adData.packages.length">
                        <label class="bdxx labelInfo">{{$t('t.productSelect')}} </label>
                        <div class="textbox">
                            <div class="m-selnum" style="text-align: center">
                                <div @click="minnumber()" class="less z-dis" >-</div>
                                <div class="textWrap">
                                    <input type="number" v-model="productNumber" @input="inputnumber();"
                                           :disabled="adData.packages && adData.packages.length">
                                </div>
                                <div @click="addnumber()" class="more">+</div>
                            </div>
                        </div>
                    </div>
                    <div class="bdbox" id="combo" style="padding: 5px 10px">
                        <div class="bdxx labelInfo">{{$t('t.productSelect')}} </div>
                        <div class="dxbox">
                            <label v-if="adData.packages && !adData.packages.length" class="attr"
                                   @click="selectAttr('package',-1)"
                                   :class="{'selected':-1===productSelectAttr.package}">{{adData.adName}}</label>
                            <label v-if="adData.packages && adData.packages.length" class="attr"
                                   v-for="item,key in adData.packages" @click="selectAttr('package',item.packageName)"
                                   :class="{'selected':item.packageName===productSelectAttr['package']}">
                                {{item.packageName}}
                            </label>
                        </div>
                    </div>
                    <div id="product_attr">
                        <div class="item" v-if="!packageType">
                            <div class="bdbox" v-for="attr,key in adData.attr">
                                <label class="bdxx labelInfo" style="text-align:left">{{key}}</label>
                                <div class="dxbox">
                                    <label class="attr" v-for="value in attr"
                                           :class="{'selected':value===productSelectAttr[key]}"
                                           @click="selectAttr(key,value)">{{value}}</label>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <div v-for="item,index in packageDetail" class="item">
                                <div class="bdbox" v-for="attr,key in item.attr">
                                    <label class="bdxx labelInfo" style="text-align:left">{{key}}</label>
                                    <div class="dxbox">
                                        <label class="attr" v-for="value in attr"
                                               :class="{'selected':value===productSelectAttr[index?key+'['+index+']':key]}"
                                               @click="selectAttr(key,value,index)">{{value}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="buy_confirm" @click="buyNow">
                        <span>{{$t('t.buyConfirm')}}</span>
                    </div>
                </mt-popup>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {post, fbTrace, formProductAttr} from '../../utils/util'
    import {IP} from '../../config/config'
    import '../../utils/lazyload'

    export default {
        name: "singlePage",
        data() {
            return {
                adData: {},
                productSelectAttr: {},
                productNumber: 1,
                selectNumClone: 1,
                step: 0,
                addressOption: {
                    province: [],
                    city: [],
                    area: [],
                },
                commonInfo: ['userName', 'userNotes', 'zipCode', 'addressDetail'],
                commonInfoTextArea: ['userNotes', 'addressDetail'],
                commonInfoNoRequired: ['zipCode', 'userNotes'],
                noConfirm: ['verifyCode','productNumber','prices'],
                showPhone: '',
                userInfo: {
                    prices: '',
                    productNumber: '',
                    userName: '',
                    phoneNumber: '',
                    province: '',
                    city: '',
                    area: '',
                    addressDetail: '',
                    zipCode: '',
                    userNotes: '',
                    verifyCode: '',
                },
                packageType: false,
                packageDetail: [],
                startTime: '9:00',
                endTime: '20:00',
                maxNum: '',
                rate: 0,
                popupVisible: false
            }
        },
        methods: {
            init(data) {
                if(data){
                    this.adData = data
                    for(let k of Object.keys(this.adData.attr)){
                        this.productSelectAttr[k] = ''
                    }
                    this.adData.fbId && fbTrace(this.adData.fbId )
                    this.productSelectAttr.package = -1
                    this.maxNum = this.adData.maxNum
                    if(this.adData.packages.length){
                        this.adData.packages.forEach((v)=>{
                            v.packageDetail.forEach(detail=>{
                                detail.attr = formProductAttr(detail.attr)
                            })
                            let packageDetail = []
                            v.packageDetail.forEach(detail=>{
                                for(let count=0;count<detail.count;count++){
                                    packageDetail.push(detail)
                                }
                            })
                            v.packageDetail = packageDetail

                        })
                        this.selectAttr('package', this.adData.packages[0].packageName)

                    }
                    document.title =  this.adData.adName;
                    setTimeout(()=>{
                        window.lazyload('',{selector:'[_src]'})
                    },200)
                    this.addressData()
                }
            },
            addressData(key){
                let params = {}
                if(key ==='province'){
                    params.province = this.userInfo.province
                }else if(key ==='city'){
                    params.city = this.userInfo.city
                }else if(key === 'area'){
                    params.province = this.userInfo.province
                    params.city = this.userInfo.city
                    params.area = this.userInfo.area
                    // return
                }
                post('location/getLocations',params).then(response=>{
                    if(response && response.code === 'success'){
                        if(key ==='province'){
                            this.addressOption.city =response.data
                            this.addressOption.area =[]
                            this.userInfo.city = ''
                            this.userInfo.area = ''
                        }else if(key ==='city'){
                            this.addressOption.area =response.data
                            this.userInfo.area = ''
                        }else if(key ==='area'){
                            if(response.data){
                                this.userInfo.zipCode =response.data[0]
                            }else{
                                this.userInfo.zipCode = ''
                            }
                        }else if(!key){
                            this.addressOption.province =response.data
                        }
                    }
                })
            },
            selectAttr(key, value, index) {
                if (key === 'package' && (this.productSelectAttr.package || value != -1)) {
                    if (value == this.productSelectAttr.package) return;
                    this.productSelectAttr = Object.assign({}, {})

                    if (value == -1) {
                        this.packageType = false;

                        for (let k of Object.keys(this.adData.attr)) {
                            this.productSelectAttr[k] = ''
                        }
                    } else {
                        this.packageType = true;
                        this.adData.packages.forEach((v, i) => {
                            if (v.packageName === value) {
                                this.packageDetail = v.packageDetail
                                for (let index = 0; index < v.packageDetail.length; index++) {
                                    for (let k of Object.keys(v.packageDetail[index].attr)) {
                                        let key = index ? k + '[' + index + ']' : k
                                        this.productSelectAttr[key] = ''
                                        this.productSelectAttr = Object.assign({}, this.productSelectAttr)
                                    }
                                }
                            }
                        })
                    }
                }

                key = index ? key + '[' + index + ']' : key
                this.productSelectAttr = Object.assign({}, this.productSelectAttr, {[key]: value})
            },
            orderDetail(str) {
                let attr = {}
                if (!str) return {}
                if (typeof str === 'string') {
                    str = JSON.parse(str)
                }
                for (let [key, item] of Object.entries(str)) {
                    if (key === 'package') continue
                    let unique = /(.*?[)(\d*)(])/.test(key) ? key.replace(/(.*?[\[])(\d*)([\]])/, '$2') : 0
                    if (attr[unique]) {
                        attr[unique].push(item)
                    } else {
                        attr[unique] = [item]
                    }
                }
                return attr
            },
            handleScrollTop() {
                window.scrollTo(0, 0)
            },
            minnumber() {
                if (this.productNumber === 1) {
                    return;
                }
                this.productNumber--;
                this.selectNumClone--;
            },
            inputnumber() {
                if (/[^0-9]+/.test(this.productNumber)) {
                    this.productNumber = this.selectNumClone
                } else {
                    this.selectNumClone = this.productNumber
                }
            },
            addnumber() {
                if (this.maxNum && this.productNumber == this.maxNum) {
                    return
                }
                this.productNumber++;
                this.selectNumClone++;
            },
            buyNow() {
                if (!this.preBuyCheck()) {
                    return;
                }

                this.popupVisible = false
                this.handleScrollTop()
                this.step = 1
            },
            confirmBuy() {
                if (!this.confirmAddOrderCheck()) {
                    return;
                }
                this.codeRequest()
            },
            addOrder() {
                let params = {}, USD = this.extras / this.rate
                let orderDetail = JSON.parse(JSON.stringify(this.productSelectAttr))
                delete orderDetail.package
                params = Object.assign(params, this.userInfo,
                    {
                        adId: this.adData.adId,
                        productId: this.adData.productId,
                        productNumber: this.productNumber,
                        contactTime: this.startTime + '-' + this.endTime,
                        packageName: this.productSelectAttr.package && this.productSelectAttr.package !== -1 ? this.productSelectAttr.package : null,
                        orderDetail: JSON.stringify(orderDetail)
                    })
                post('order/addOrders', [params]).then(response => {
                    if (response && response.code === 'success') {
                        this.$message.success(this.$t('t.buySuccess'))
                        fbq('track', 'Purchase', {
                            value: USD,
                            currency: 'USD'
                        })
                        fbq('track', 'InitiateCheckout')
                        window.open(IP + 'orderSuccess.jsp?' + 'id=' + response.data.id, '_self')
                    }
                    else {
                        if (response && response.code == '0006') {
                            this.$message.error(this.$t('t.repeatOrder'))
                        } else {
                            this.$message.error(this.$t('t.buyError'))
                        }
                    }
                })
            },
            initRate() {
                let createScript = (url, callback) => {
                    let new_element = document.createElement("script");//创建新的script节点
                    new_element.setAttribute("type", "text/javascript");
                    new_element.setAttribute("src", url);
                    if (new_element.addEventListener) {
                        new_element.addEventListener('load', function () {
                            callback();
                        }, false);
                    } else if (new_element.attachEvent) {
                        new_element.attachEvent('onreadystatechange', function () {
                            let target = window.event.srcElement;
                            if (target.readyState == 'loaded') {
                                callback();
                            }
                        });
                    }
                    (document.body).appendChild(new_element);//添加到body节点的末尾
                };
                window.op_aladdin_callback = (v) => {
                    if (v && v.data[0]) {
                        this.rate = Number(v.data[0].number2)
                    }
                }
                createScript('https://sp0.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?query=1%E7%BE%8E%E5%85%83%E7%AD%89%E4%BA%8E%E5%A4%9A%E5%B0%91%E5%8D%B0%E5%B0%BC%E5%8D%A2%E6%AF%94&co=&resource_id=6017&t=1540990915057&cardId=6017&ie=utf8&oe=gbk&cb=op_aladdin_callback&format=json&tn=baidu', () => {
                })
            },

            preBuyCheck() {
                let valid = true;
                for (let i of Object.values(this.productSelectAttr)) {
                    if (i === '') {
                        valid = false;
                        this.Toast({message: this.$t('t.selectProductAttrTip'), duration: 3000, className: 'toast'})
                        return valid;
                    }
                }
                return valid;
            },
            confirmAddOrderCheck(key) {
                this.phoneCheck()
                let required = ['province', 'city', 'area', 'addressDetail', 'phoneNumber', 'userName']

                if(key){
                    if (required.includes(key) && this.userInfo[key] === '') {
                        this.setError(key)
                    } else {
                        this.setError(key, true)
                    }
                }else{
                    let valid = true;

                    for (let [k, v] of Object.entries(this.userInfo)) {
                        if (required.includes(k) && v === '') {
                            valid = false
                            this.setError(k)
                        } else {
                            this.setError(k, true)
                        }
                    }
                    return valid
                }
            },
            setError(key, del) {
                let selector = '[prop=' + key + ']'
                let dom = document.querySelector(selector + ' input') || document.querySelector(selector)
                if (!dom) {
                    return
                }
                if (del) {
                    dom.classList.remove('is-error')
                } else {
                    dom.classList.add('is-error')
                }
            },
            phoneCheck() {
                let re = /(^['062','62','08','8','1'][0-9]{8,15})/
                if (re.test(this.showPhone)) {
                    this.userInfo.phoneNumber = this.showPhone
                } else {
                    return ''
                }
            },
            phoneChange() {
                if (!/(^[0-9]+[0-9]*$)/.test(this.showPhone)) {
                    this.showPhone = this.showPhone.substring(0, this.showPhone.length - 1)
                }
            },
            codeRequest() {
                let params = {phoneNumber: this.userInfo.phoneNumber}
                post('verify/sendVerify', params).then(response => {
                    if (response && response.code === 'success') {
                        // this.codeCheck()
                    }
                })
                this.codeCheck()
            },
            codeCheck() {
                const h = this.$createElement;
                let _this = this
                let code = []
                const codeV = (e, index) => {
                    if (/([^0-9])/.test(e.target.value)) {
                        e.target.value = code[index] || ''
                        return
                    }
                    code[index] = e.target.value
                    index < 3 && e.target.nextSibling.focus()
                }
                this.$msgbox.prompt('', _this.$t('t.identifyingCode'), {
                    confirmButtonText: _this.$t('t.confirm'),
                    showCancelButton: false,
                    center: true,
                    showInput: false,
                    closeOnClickModal: false,
                    message: h('p', {class: ['code']}, [
                        h('input', {
                            style: '',
                            attrs: {maxlength: 1,},
                            domProps: {value: code[0]},
                            on: {
                                input: function (e) {
                                    codeV(e, 0)
                                }
                            }
                        }),
                        h('input', {
                            style: '',
                            attrs: {maxlength: 1,},
                            domProps: {value: code[1]},
                            on: {
                                input: function (e) {
                                    codeV(e, 1)
                                }
                            }
                        }),
                        h('input', {
                            style: '',
                            attrs: {maxlength: 1,},
                            domProps: {value: code[2]},
                            on: {
                                input: function (e) {
                                    codeV(e, 2)
                                }
                            }
                        }),
                        h('input', {
                            style: '',
                            attrs: {maxlength: 1,},
                            domProps: {value: code[3]},
                            on: {
                                input: function (e) {
                                    codeV(e, 3)
                                }
                            }
                        }),
                    ]),
                }).then((action, instance) => {
                    this.userInfo.verifyCode = code.join('')
                    this.addOrder()
                }).catch(() => {
                    this.addOrder()
                });
            },
            showAttr() {
                this.popupVisible = true
            }
        },
        created() {
            window.templet = this
            this.initRate()
        },
        computed: {
            extras() {
                if (!this.adData || !this.adData.packages) {
                    return 0
                }
                this.userInfo.prices = this.productNumber * ((this.productSelectAttr.package && this.productSelectAttr.package !== -1) ? this.adData.packages.filter(v => {
                    return v.packageName === this.productSelectAttr.package
                })[0].price : this.adData.price)
                return this.productNumber * ((this.productSelectAttr.package && this.productSelectAttr.package !== -1) ? this.adData.packages.filter(v => {
                    return v.packageName === this.productSelectAttr.package
                })[0].price : this.adData.price)
            }
        },
        mounted() {
            window.onscroll = (e)=>{
                let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if(scrollTop>window.innerHeight){
                    document.querySelector('.icon-caret-top') && ( document.querySelector('.icon-caret-top').style.display ='block')
                }else{
                    document.querySelector('.icon-caret-top') && (document.querySelector('.icon-caret-top').style.display ='none')
                }
            }
        },
        watch: {
            productNumber: {
                immediate: true,
                handler: function (v, o) {
                    //执行代码
                    this.userInfo.productNumber = v
                }
            }
        }
    }
</script>

<style>
    @import "../../assert/css/singlePage.css";

    #popup {
        position: relative;
        max-height: 60vh;
        overflow-y: auto;
    }

    .toast {
        display: table;
        background-color: #ffa500;
    }

    .orderInfo{
        min-height: 60px;
        border:1px solid #aaa;
        border-radius: 4px;
        clear: both;
        padding: .13333rem .32rem;
        box-sizing: border-box;
    }
    .orderInfoDetail{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-box;
        display: -o-box;
        display: box;
        padding-bottom: 10px;
    }
    .item-info{
        -webkit-box-flex: 1;
        -ms-box-flex: 1;
        -o-box-flex: 1;
        box-flex: 1;
        text-align: start;
        padding-right: 20px;
        word-break: break-all;
    }
    .item-attr{
        display: block;
        padding-top: 5px;
        font-size: 13px;
        color: #aaa;
    }
    .searchPrice{
        float: right;
        line-height: 20px;
    }

    .priceTitle{
        font-size: 12px;
        padding-right: 5px;
        color:#aaa
    }
    .contactTime .el-date-editor.el-input {
        width: 50%;
    }
    .labelInfo {
        color: #555;
        font-weight: 500;
        font-size: 16px;
        line-height: 42px;
        background-color: #d1d1d1;
        text-indent: 2%;
        margin-bottom: 5px;
    }
    .labelInfo:before {
        display: inline-block;
        width: 4px;
        height: 25px;
        background: #c50a1d;
        margin-right: 8px;
        vertical-align: middle;
        content: '';
    }
    .headerTipContent{
        padding: 15px 18px;
        background-color: #1c1c1c;
        color: white;
    }
    .icon-caret-top{
        position: fixed;
        bottom: 80px;
        right: 20px;
        box-shadow: 0 0 6px rgba(0,0,0,.12);
        border-radius: 20px;
        width: 40px;
        height: 40px;
        transform: rotate(90deg);
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        background-color: #e3e1e1;
        font-weight: 600;
    }
</style>